<template>
  <section class="panel" :id="id">
    <!-- fp-bg 结构，某些section有darker类 -->
    <div class="fp-bg" :class="{ 'darker': isDarker }">
      <div 
        class="fb_bg_in"
        :style="{ backgroundImage: backgroundImage }"
      ></div>
    </div>
    <div class="content">
      <slot></slot>
    </div>
  </section>
</template>

<script setup lang="ts">
import { computed } from 'vue';
// 使用 ?url 后缀让Vite正确处理图片资源
import bgHead from '@/assets/images/backgrounds/bg_head.jpg?url';
import bgAbout from '@/assets/images/backgrounds/bg_about.jpg?url';
import bgServices from '@/assets/images/backgrounds/3d_screen_bg_image.jpg?url';
import bgPartners from '@/assets/images/backgrounds/bg_partners.jpg?url';
import bgClients from '@/assets/images/backgrounds/bg_clients.jpg?url';
import bgContact from '@/assets/images/backgrounds/bg_contacts.jpg?url';

const props = defineProps<{
  id: string;
}>();

// 背景图片映射
const backgrounds: Record<string, string> = {
  home: bgHead,
  about: bgAbout,
  catalog: bgAbout, // 目录页使用与关于页面相同的背景
  services: bgServices,
  partners: bgPartners,
  clients: bgClients,
  contact: bgContact,
};

// 需要深色遮罩层的section（参考原网站）
const darkerSections = ['about', 'catalog', 'partners', 'contact'];

const backgroundImage = computed(() => {
  const bg = backgrounds[props.id];
  return bg ? `url(${bg})` : 'none';
});

const isDarker = computed(() => {
  return darkerSections.includes(props.id);
});
</script>

<style scoped>
.panel {
  flex: 0 0 100vw;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3.2rem;
  font-weight: 700;
  color: var(--text-color);
  position: relative;
  overflow: hidden;
}

/* fp-bg 背景容器 - 与原网站一致 */
.fp-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.fp-bg:after{
  content: '';
    display: block;
    width: 100%;
    background: radial-gradient(ellipse at 70% center,rgba(27,33,45,.7) 0,rgba(27,33,45,.9) 30%,#1b212d 50%,#1b212d 100%);
}

.fb_bg_in {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  z-index: 0;
}

/* darker类的深色遮罩层 - 参考原网站 */
.fp-bg.darker .fb_bg_in::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(17, 23, 36, 0.7);
  z-index: 1;
}

.content {
  width: 100%;
  max-width: 1920px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}
</style>